<template>
	<div>
		<ul>
			<li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)">
				<img :src="data.poster" alt="">
				<h3>{{ data.name }}</h3>
				<p>观众评分 {{ data.grade }}</p>
				<p>主演:{{ data.actor_list | actorfilter  }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import Vue from 'vue'
	import axios from 'axios'

	Vue.filter('actorfilter',function(data){
		var newlist = data.map(item=>item.name)
		return newlist.join(' ')
	})


	export default {
		data() {
			return {
				datalist: []
			}
		},
		methods: {
			handleChangePage(id) {
				// console.log(id);
				//编程式导航-路径跳转
				// this.$router.push(`/detail/${id}`)

				//编程式导航-名字跳转
				this.$router.push({
					name: "detail",
					params: {
						id: id
					}
				})
			}
		},
		mounted() {
			axios({
				url: 'http://127.0.0.1:8003/filmlist/',
				})
				.then(res => {
					console.log(res.data);
					this.datalist = res.data;
				})

		}
	}
</script>

<style scoped>
	ul li {
		padding: 10px;
		overflow: hidden;
	}

	ul li img {
		float: left;
		width: 100px;
	}
</style>
